<!DOCTYPE html>
<html lang="en" class="x-admin-sm">

<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>订单信息列表</title>
  <link rel="stylesheet" href="./assets/css/font.css" />
  <link rel="stylesheet" href="./assets/css/xadmin.css" />
  <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  <script type="text/javascript" src="./assets/layui/layui.js"></script>
  <script type="text/javascript" src="./assets/js/xadmin.js"></script>
</head>

<body>
    <div id="app">
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a href="javascript:;">管理系统</a>
              <a href="javascript:;">订单信息</a>
              <a><cite>订单信息列表</cite></a>
            </span>
        </div>
        <div style="margin-top:8px;"></div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" v-model="keywords" placeholder="请输入订单号" autocomplete="off" class="layui-input"></div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" title="查询" @click="query()"><i class="layui-icon">&#xe615;</i> 查询</button>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn layui-btn-danger" title="删除" @click="datadel()"><i
											class="layui-icon layui-icon-delete"></i> 删除</button>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn layui-btn-normal" onclick="location.reload()" title="刷新"><i
											class="layui-icon layui-icon-refresh"></i> 刷新</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th style="text-align: center; width: 5px;">&nbsp;</th>
                                        <th style="text-align: center">订单号</th>
                                        <th style="text-align: center">用户</th>
                                        <th style="text-align: center">生鲜名称</th>
                                        <th style="text-align: center">单价</th>
                                        <th style="text-align: center">数量</th>
                                        <th style="text-align: center">总计</th>
                                        <th style="text-align: center">下单日期</th>
                                        <th style="text-align: center">状态</th>
                                        <th style="text-align: center">收货人</th>
                                        <th style="text-align: center">送货地址</th>
                                        <th style="text-align: center">联系方式</th>
                                        <th style="text-align: center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in orders" :key="item.ordersid">
                                        <td style="text-align: center"><input type="checkbox" :value="item.ordersid" placeholder="请选择" v-model="ids"></td>
                                        <td style="text-align: center">{{ item.ordercode }}</td>
                                        <td style="text-align: center">{{ item.username }}</td>
                                        <td style="text-align: center">{{ item.goodsname }}</td>
                                        <td style="text-align: center">{{ item.price }}</td>
                                        <td style="text-align: center">{{ item.num }}</td>
                                        <td style="text-align: center">{{ item.total }}</td>
                                        <td style="text-align: center">{{ item.addtime }}</td>
                                        <td style="text-align: center">{{ item.status }}</td>
                                        <td style="text-align: center">{{ item.receiver }}</td>
                                        <td style="text-align: center">{{ item.address }}</td>
                                        <td style="text-align: center">{{ item.contact }}</td>
                                        <td style="text-align: center">
                                            <span v-if="item.status == ''"><a href="javascript:;" title="" @click="status(item.ordersid)">发货</a>&nbsp;&nbsp;</span>
<a href="javascript:;" title="删除" @click="deleteOrders(item.ordersid)"><i class="layui-icon">&#xe640;</i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-card-body">
                            <div id="layui" style="text-align: center;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

  <script type="text/javascript" src="./assets/js/axios.min.js"></script>
  <script type="text/javascript" src="./assets/js/vue.js"></script>
  <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
	<script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;
        });
		  const vue = new Vue({ // 实例化Vue对象
			el: '#app',// 绑定作用域
			data: { //定义数据 用于vue的双向绑定
				orders: [],
				ids: [], // 定义批量删除的数组
				page: {}, // 定义页面数据
				count: 0, // 定义总页数
				page: 1, // 默认第一页
				limit: 10, // 每页显示行数
				keywords: '', // 查询关键字
			},
			created() { // 生命周期相关的函数
				this.loadTable(); // 调用查询订单信息的方法
			},
			methods: {
				loadTable: function () { // 查询订单信息的函数
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/orders/getOrdersByPage.action?page=' + _this.page + '&limit=' + _this.limit).then(result => {
						_this.orders = result.data.data;
						_this.count = result.data.count;
						if (_this.page == 1) {
							_this.loadPage();
						}
					});
				},
				loadPage: function () { // 调用LayUI分页标签的使用
					layui.use(['laypage'], function () {
						const laypage = layui.laypage;
						laypage.render({
							elem: 'layui', // 定义标签显示
							count: vue.count, //数据量
							limit: vue.limit,//每页限制
							jump: function (obj, first) {
								if (!first) {
									vue.page = obj.curr;
									vue.loadTable();
								}
							}
						});
					})
				},
				deleteOrders: function (ordersid) { // 根据主键删除订单信息
					let _this = this;
					if (window.confirm('确定要删除这条记录吗？')) {
						axios.get('http://localhost:8080/vue_gxhfztjxt/orders/deleteOrders.action?id=' + ordersid).then(result => {
							if (result.data.code > 0) {
								_this.loadTable();
							} else {
								alert('系统错误，请稍后再试');
							}
						});
					}
				},
				datadel: function () { // 批量删除订单信息
					let _this = this;
					if (window.confirm('确定要批量删除记录吗？')) {
						axios.post('http://localhost:8080/vue_gxhfztjxt/orders/deleteOrdersByIds.action', _this.ids).then(result => {
							if (result.data.code > 0) {
								_this.loadTable();
							} else {
								alert('系统错误，请稍后再试');
							}
						});
					}
				},
				status: function(ordersid) {
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/orders/status.action?id=' + ordersid).then(result => {
    					if (result.data.code > 0) {
       				 	_this.loadTable();
					    } else {
				        	alert('系统错误，请稍后再试');
    					}
					});
				},
				query: function() {
					let _this = this;
					axios.get('http://localhost:8080/vue_gxhfztjxt/orders/getOrders.action?page=' + _this.page + '&limit=' + _this.limit + '&keywords=' + _this.keywords).then(result => {
						_this.orders = result.data.data;
						_this.count = result.data.count;
						if (_this.page == 1) {
							_this.loadPage();
						}
					});
				},
				getOrdersById: function (ordersid) { // 编辑按钮点击事件
					let url = 'editorders.html?id=' + ordersid;
					xadmin.open('编辑订单', url);
				},
			},
		});
	</script>

</body>

</html>


